<template>
    <div style="width: 100%; height: 90%">
        <div class="sss">
            <label class="bbb">统计维度:</label>
            <select class="sel" @change="aa">
                <option value="rate">完成率</option>
                <option value="count">完成数</option>

            </select>
        </div>
        <div class="chart1"></div>
    </div>
</template>
  
<script>
import apis from '@/apis/api'
import * as echarts from "echarts";
export default {
    data() {
        return {
            type: "rate", //rate表示完成率排名，count表示完成数排名
            list: [],
            yList: [],
        }
    },
    mounted() {
        this.fetchSend(this.type);
    },
    computed: {},

    methods: {
        aa(e) {
            let v = e.target.value;
            this.type = v;
            this.fetchSend(v);
        },
        fetchSend(t) {
            apis.analysisRank({ type: t }).then(result => {
                let res = result.data;
                this.list = res;
                this.yList = res.map(i => { return i.name });
                this.init()
            });
        },

        compare(prop) {
            return function (obj1, obj2) {
                var val1 = obj1[prop];
                var val2 = obj2[prop]; if (val1 < val2) {
                    return -1;
                } else if (val1 > val2) {
                    return 1;
                } else {
                    return 0;
                }
            }
        },

        init() {
            // 实例化对象
            var myChart = echarts.init(document.querySelector(".chart1"));
            // 指定配置和数据
            var option = {
                color: ["#2f89cf"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: "0%",
                    top: "10px",
                    right: "15%",
                    bottom: "4%",
                    containLabel: true
                },
                yAxis: [
                    {
                        type: "category",
                        data: this.yList,
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#fff",
                                fontSize: "12"
                            }
                        },
                        axisLine: {
                            show: true
                        }
                    }
                ],
                xAxis: { show: false },
                series: [
                    {
                        name: this.type=='rate'&& '完成率'||"完成数",
                        type: "bar",
                        barWidth: "40%",
                        data: this.list.sort(this.compare("value")),
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: "#fff",
                                    },
                                    position: "right",
                                    // formatter: function (p) {
                                    //     return p.value + '%';
                                    // }
                                },
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#193791' },
                                    { offset: 1, color: '#83bff6' }
                                ])
                            },
                            barBorderRadius: 1,
                        },
                    }
                ]
            };

            // 把配置给实例对象
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
    },
}
</script>

<style lang="scss" scoped>
.chart1 {
    width: 100%;
    height: 100%;
}

.sss {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
    color: #c6eaff;
}

.sel {
    width: 2.5rem;
    height: .4rem;
    font-size: .2rem;
    border: .025rem solid #304e8c;
    background: #0a1237;
    outline: none;
    color: #c6eaff;
}

.bbb {
    font-size: .2rem;
    color: #c6eaff;
    margin-right: 10px;
    font-family: Arial, Helvetica, sans-serif;
}</style>